<style scoped>
/* 样式私有化 */
    span{
        font-size: 30px;
        user-select: none;
        cursor: pointer;
    }
    .active{
        color: coral;
    }
</style>
<template>
    <div>
        <span 
            :class="s_index-1 >= index ? 'active' : ''"
            v-for="(item,index) in Number(number)" :key="index"
            @click="changeIndex(index)">
            ★
        </span>
    </div>
</template>
<script>
    export default {
        props: {
            number: {
                type: [String,Number],
                default: () => {
                    return 5
                }
            },
            s_index: {
                type: [String,Number],
                default: ()=> {
                    return -1
                }
            }
        },
        methods:{
            changeIndex(index){
                // 赋值
                // this.s_index = index;
                // 自定义事件
                this.$emit('changeIndex',index)
            }
        }
    }
</script>